<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas刮奖</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        body {
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
            overflow: hidden;
        }

        .guajiang {
            width: 432px;
            height: 186px;
            position: relative;
            margin: 22px;
            border: solid 1px #dedede;
        }

        .jiangpin {
            width: 100%;
            height: 100%;
            text-align: center;
            color: #f60;
        }

        .jiangpin h2 {
            font-size: 54px;
            margin-top: 32px;
        }

        .jiangpin p {
            font-size: 15px;
            color: #333;
        }


        #myCanvas {
            position: absolute;
            left: 0;
            top: 0;
        }


    </style>
</head>

<body>
<div class="guajiang">
    <canvas id="myCanvas" width="432" height="186">
    </canvas>
    <div class="jiangpin">
        <!--        <h2>恭喜你</h2>-->
        <!--        <p>苹果手机1台</p>-->
    </div>
</div>
<script type="text/javascript">
    "use strict";var jp=[{text:"苹果手机1台"},{text:"电影票1张"},{text:"现金红66元"},{text:"非常遗憾"}],jiangpin=document.querySelector(".jiangpin"),h2=document.createElement("h2"),p=document.createElement("p"),down=!1,currentColor="#000",currentSize=20,c=document.getElementById("myCanvas"),ctx=c.getContext("2d");ctx.fillStyle="#eee",ctx.lineCap="round",ctx.lineJoin="round",ctx.fillRect(0,0,432,186),ctx.lineCap="round";var xh=Math.round(3*Math.random()),result=jp[xh];"非常遗憾"==result.text?(h2.innerText="非常遗憾",p.innerText="下次再来"):(h2.innerText="恭喜你",p.innerText=result.text),jiangpin.appendChild(h2),jiangpin.appendChild(p);var bgx=void 0,bgy=void 0;c.addEventListener("mousedown",function(e){e.preventDefault(),ctx.strokeStyle=currentColor,ctx.lineWidth=currentSize,bgx=e.pageX-22,bgy=e.pageY-22,ctx.beginPath(),ctx.moveTo(bgx,bgy),down=!0}),c.addEventListener("mousemove",function(e){down&&(ctx.globalCompositeOperation="destination-out",ctx.lineTo(e.pageX-22,e.pageY-22),ctx.stroke())}),c.addEventListener("mouseup",function(e){down=!1,ctx.closePath()});
</script>
</body>

</html>